import { ref } from 'vue'
import * as echarts from 'echarts'

export function useActivityTrendChart() {
  const activityTrendChart = ref(null)

  // 初始化图表的通用函数
  const initChart = (chartRef, option) => {
    if (!chartRef.value) return
    const chart = echarts.init(chartRef.value)
    chart.setOption(option)

    // 添加响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })

    return chart
  }

  // 图表4：党建活动成效趋势 - 双Y轴图表
  const initActivityTrendChart = async (data) => {
    let activityTypes = [];
    let activityCounts = [];
    let avgAchievementLevels = [];
    for (let item of data) {
      // 活动类型：1-理论学习，2-技术攻关，3-质量提升，4-安全生产，5-志愿服务，6-组织生活
      switch (item.activityTypes) {
        case "1": activityTypes.push('理论学习'); break;
        case "2": activityTypes.push('技术攻关'); break;
        case "3": activityTypes.push('质量提升'); break;
        case "4": activityTypes.push('安全生产'); break;
        case "5": activityTypes.push('志愿服务'); break;
        case "6": activityTypes.push('组织生活'); break;
        default: activityTypes.push('未知'); break;
      }
      activityCounts.push(item.activityCounts);
      avgAchievementLevels.push(item.avgAchievementLevels);
    }

    const sortedTypes = activityTypes

    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#1890ff',
        textStyle: { color: '#fff' }
      },
      legend: {
        data: ['活动数量', '平均成效等级'],
        textStyle: { color: '#fff', fontSize: 12 },
        top: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: sortedTypes,
        axisLabel: { color: '#fff', fontSize: 11 },
        axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } }
      },
      yAxis: [
        {
          type: 'value',
          name: '活动数量',
          axisLabel: { color: '#fff', fontSize: 11 },
          axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } },
          splitLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.1)' } }
        },
        {
          type: 'value',
          name: '成效等级(%)',
          min: 0,
          max: 100,
          axisLabel: { color: '#fff', fontSize: 11 },
          axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } }
        }
      ],
      series: [
        {
          name: '活动数量',
          type: 'line',
          data: activityCounts,
          smooth: true,
          itemStyle: { color: '#faad14' },
          lineStyle: { width: 3 },
          symbol: 'circle',
          symbolSize: 8,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(250, 173, 20, 0.3)' },
              { offset: 1, color: 'rgba(250, 173, 20, 0)' }
            ])
          }
        },
        {
          name: '平均成效等级',
          type: 'bar',
          yAxisIndex: 1,
          data: avgAchievementLevels,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#1890ff' },
              { offset: 1, color: '#096dd9' }
            ])
          },
          emphasis: {
            itemStyle: { color: '#40a9ff' }
          },
          barWidth: '30%'
        }
      ]
    }

    initChart(activityTrendChart, option)
  }

  return {
    activityTrendChart,
    initActivityTrendChart
  }
}
